<script setup>
import { onMounted,ref } from 'vue'
import axios from 'axios'
import jwt_decode from "jwt-decode";
import { useRouter } from 'vue-router';
import { useTestStore } from '@/stores/test.js'
const store = useTestStore()

const router = useRouter()
const accountList = ref('')
const accountCredList = ref('')

const isAcountList = ref(false)
const isAccountCredList = ref(false)

defineOptions({
    inheritAttrs:false
})
onMounted(()=>{
    let token = jwt_decode(localStorage.getItem("token"))
    if (token == null) {
        token = jwt_decode(localStorage.getItem("longToken"))
    }
    axios.get('http://192.168.110.221:8080/user/queryAllAccountController',{
        params:{
            token: localStorage.getItem("token"),
            longToken: localStorage.getItem("longToken"),
            userId: token.userId,
            userNumber: token.userNumber,
        }
    })
    .then((resp)=>{
        if(resp.data.code==200){
            if(resp.data.datas.accountList!=''){
                accountList.value = resp.data.datas.accountList;
                isAcountList.value = true;
            }

            if(resp.data.datas.accountCredList!=''){
                accountCredList.value = resp.data.datas.accountCredList;
                isAccountCredList.value = true;
            }

        }else if(resp.data.code==400){
            alert("非法访问")
        }
    })
    .catch((e)=>{
        alert("出现了一些意料之外的错误")
    })
})


function show(num,type){
    if(type=='信用卡'){
        router.push('/card-info-credit')
        store.accountNumber = num
    }else{
        router.push('/card-info')
        store.accountNumber = num
    }
}
</script>


<template>
    <div class="info-box">
        <h1>
            <span class="iconfont">&#xe68a;</span>
            <span class="title">当前用户所有银行卡</span>
        </h1>
        <div>
            <li v-for="a in accountList" @click="show(a.accountNumber,a.cardType)">
                <p>卡号:<span>{{a.accountNumber}}</span></p>
                <p>类型:<span>{{a.cardType}}</span></p>
                <p>当前状态:<span>{{a.accountStatus == 1 ? '可用' : '不可用'}}</span></p>
            </li>
            <li v-for="b in accountCredList" @click="show(b.accountNumber,'信用卡')">
                <p>卡号:<span>{{b.accountNumber}}</span></p>
                <p>类型:<span>信用卡</span></p>
                <p>当前状态:<span>{{b.accountStatus  == 1 ? '可用' : '不可用'}}</span></p>
            </li>
            <li v-if=" !(isAcountList || isAccountCredList) ">
                <p>暂无银行卡信息</p>
            </li>
        </div>
    </div>
</template>

<style scoped>
*{
    margin: 0;
    padding: 0;
    list-style: none;
}
.iconfont {
    font-family: "iconfont" !important;
    font-size: 30px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: 400;
    color: #f37309;
}
.info-box{
    margin: 10px 10px 10px;
    background-color: #fff !important;
    width: 89%;
    border-radius: 10px;
    padding: 10px
}
.info-box::after{
    display: block;
    content: "";
    clear: both;
}
h1{
    font: normal 600 16px 'Serif';
    margin-left: 3%;
    margin-top: 5px;
}
.title{
    height: 30px;
    line-height: 30px;
    vertical-align: bottom;
    margin-left: 20px;
}
li{
    width: 94%;
    margin: 10px auto;
    border-radius: 5px;
    padding: 3px 5px;
    background-color: #f0a2a2;
    color: #fff;
}
li p{
    padding: 2px 0;
}
li p span{
    margin-left: 10px;
}
</style>